<template>
  <div id="wave-chart" style="width: 100%; height: 60vh;background-color: white" ></div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  name: 'WaveChart',
  props: {
    tidalData: {
      type: Object,
      required: true,
      default: () => ({}),
    },
  },
  data() {
    return {
      chart: null,
    };
  },
  mounted() {
    setTimeout(
        ()=>{ this.initChart();},100
    )
  },
  beforeDestroy() {
    if (this.chart) {
      this.chart.dispose();
    }
  },
  methods: {
    initChart() {
      const chartDom = document.getElementById('wave-chart');
      this.chart = echarts.init(chartDom);

      // 假设涨潮时间为0，退潮时间为100%的时间点
      // 我们没有具体的水位数据，所以这里用线性插值来模拟水位变化
      const onTimePercent = (new Date(this.tidalData.onTime).getTime() - new Date(this.tidalData.date).getTime()) /
          ((new Date(this.tidalData.outTime).getTime() - new Date(this.tidalData.date).getTime()) || 1); // 防止除0错误
      const outTimePercent = 1; // 退潮时间我们假设为100%

      // 创建水位数据
      const timePoints = 100; // 假设我们将时间段分成100个点
      const waterLevels = [];
      for (let i = 0; i <= timePoints; i++) {
        const percent = i / timePoints;
        // 使用线性插值计算水位，这里简单假设从0到maxWaterLevel再到0
        const maxWaterLevel = 10; // 假设最大水位为10
        const waterLevel = (percent <= onTimePercent ? percent / onTimePercent : (1 - (percent - onTimePercent) / (1 - onTimePercent))) * maxWaterLevel;
        waterLevels.push(waterLevel);
      }

      // 准备时间轴数据（这里只是模拟，实际可能需要根据具体需求调整）
      const xAxisData = [];
      for (let i = 0; i <= timePoints; i++) {
        const hours = Math.floor((i / timePoints) * 24); // 假设是24小时制
        const minutes = Math.floor(((i / timePoints) * 24 - hours) * 60);
        xAxisData.push(`${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}`);
      }

      // 配置ECharts选项
      const option = {
        xAxis: {
          type: 'category',
          data: xAxisData,
        },
        yAxis: {
          type: 'value',
        },
        series: [
          {
            data: waterLevels,
            type: 'line',
            smooth: true, // 使线条平滑
          },
        ],
      };

      // 使用配置项生成图表
      this.chart.setOption(option);
    },
  },
};
</script>

<style scoped>
/* 你可以在这里添加组件的样式 */
</style>